import * as echarts from 'echarts'
import React from 'react'


/**
 * 名称：标签明细栏
 * 描述：标签明细栏
 * 调用：标签中心
 * 输入：store 标签相关存储
 * 时间：20220403
 */
class AssetTagEchart extends React.Component {
  draw(){
    // 初始化
    var myChart = echarts.init(document.getElementById('asset-tag'));
    const zeroPozitionX = 0
    const zeroPozitionY = 0
    const speed = 200
    const symbolSize = [100,50,20]
    const {store} = this.props
    const {tagName,relatedActivityItems,derivedTagItems} = store
    
    var tagLinks = []
    var tagNodes = [{
        category:0,
        id:"0",
        name:tagName,
        symbolSize:symbolSize[0],
        x: zeroPozitionX,
        y: zeroPozitionY,
        label:{show:true},
        value:1.22

    }]
    
    var activityLen = relatedActivityItems.length

    relatedActivityItems.map((item,index)=>{
        
        tagNodes = [...tagNodes,
            {
                category:1,
                id:"activity"+index,
                name:item.name,
                symbolSize:symbolSize[1],
                x: zeroPozitionX + speed,
                y: zeroPozitionY + speed * (index + 0.5 - activityLen/2)/4*3,
                label:{show:true},
                value:1.22
        
            }
        ]
        tagLinks = [...tagLinks,{source:0,target:"activity"+index}]
        item.tags.map((tItem)=>{
            var relatedTagIndex = derivedTagItems.findIndex(rItem => rItem.key === tItem)

            tagLinks = [...tagLinks,{source:"activity"+index,target:"tag"+relatedTagIndex}]
            
        })
        
    })
    var tagLen = derivedTagItems.length
    derivedTagItems.map((item,index)=>{
        tagNodes = [...tagNodes,
            {
                category:2,
                id:"tag"+index,
                name:item.name,
                symbolSize:symbolSize[2],
                x: zeroPozitionX + speed + speed,
                y: zeroPozitionY + speed * (index + 0.5 - tagLen/2),
                label:{show:true},
                value:1.22
        
            }
        ]
    })
    
    var graph = {
        
        categories:[{name:"标签"},{name:"营销活动"},{name:"衍生指标"}],
        links:tagLinks,
        nodes:tagNodes

    }
    
    // 绘制图表
    myChart.setOption({
        title: {
          text: '标签引用关系',
          subtext: 'Default layout',
          top: 'top',
          left: 'left'
        },
        tooltip: {},
        legend: [
          {
            // selectedMode: 'single',
            data: graph.categories.map(function (a) {
              return a.name;
            })
          }
        ],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            name: 'Les Miserables',
            type: 'graph',
            layout: 'none',
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            roam: true,
            label: {
              position: 'right',
              formatter: '{b}'
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            },
            emphasis: {
              focus: 'adjacency',
              lineStyle: {
                width: 10
              }
            }
          }
        ]
      });
  }
  componentDidMount(){
    this.draw()
  }
  componentDidUpdate(){
    this.draw()
  }
render() {
  
  return (
      <div id="asset-tag" style={{ width: '100%', height: 500 }}></div>
  );
}
}

export default AssetTagEchart